'use client';

import React, { FC } from 'react';
import style from './Categories.module.scss';
import { useCategory } from '@/store/category';

const typeCategories = [
  { "id": 1, "name": "Категория 1" },
  { "id": 2, "name": "Категория 2" },
  { "id": 3, "name": "Категория 3" },
  { "id": 4, "name": "Категория 4" },
  { "id": 5, "name": "Категория 5" },
  { "id": 6, "name": "Категория 6" }
];

const activeIndex = 0;

const Categories:FC<{
  className?: string
}> = ({
  className,
}) => {
  const categoryActiveId = useCategory((state) => state.activeId);


  return (
    <div className={style.categories}>
      {typeCategories.map(({ name, id }, index) => (
        <a
          className={activeIndex === id ? style.categories__itemActive : style.categories__item}
          href={`/#${id}`}
          key={index}
        >
          <button
            className={
            categoryActiveId === id
              ? `${style.categories__button} ${style.categories__buttonActive}`
              : style.categories__button}
          >
            {name}
          </button>
        </a>
      ))}
    </div>
  );
};

export default Categories;
